<template>
    <div class="system-microservice-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">
                <el-table size="default" ref="expandTable" :data="state.tableData" row-key="index"
                    :expand-row-keys="state.expandedRowKeys" @expand-change="funcExpand" style="width: 100%">


                    <el-table-column type="expand">
                        <template #default="scope">
                            <el-card>
                                <el-table size="default" :data="scope.row.instances" border="">
                                    <el-table-column label="instanceId" prop="instanceId"></el-table-column>
                                    <el-table-column label="host" prop="host"></el-table-column>
                                    <el-table-column label="uri" prop="uri"></el-table-column>
                                </el-table>
                            </el-card>
                        </template>
                    </el-table-column>




                    <el-table-column label="序号" prop="index" width="100px" />
                    <el-table-column label="微服务名称">
                        <template #default="scope">
                            <div v-text="scope.row.name.toUpperCase()"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary"
                                    @click="handlerRegisterResource(scope.row.name.toUpperCase())">同步权限</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="messageLog">

import { reactive, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';

// 导入接口
import { useSysApi } from "../../../api/sys";



const expandTable = ref();


const state = reactive({
    expandedRowKeys: [] as any,
    tableData: [] as any
});


const remove = (array: any[], val: any) => {
    const index = array.indexOf(val)
    if (index > -1) {
        array.splice(index, 1)
        return true
    }
    return false
}

const funcExpand = async (row: any, expands: any) => {
    if (!remove(state.expandedRowKeys, row.index)) {
        state.expandedRowKeys.push(row.index)
    }
    let instances = await useSysApi().getServiceInstances(row.name);
    row["instances"] = instances;
}


const getServices = async () => {
    try {
        let listTemp = await useSysApi().getServices();
        state.tableData = [];
        listTemp.forEach((element: any, index: number) => {
            state.tableData.push({
                name: element,
                index: index
            })
        });
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}

const handlerRegisterResource = async (microserviceName: any) => {
    try {
        await useSysApi().registerResource(microserviceName);
        ElMessage.success(microserviceName + ",权限同步成功！");
    } catch (error: any) {
        ElMessage.error(error.msg);
    }

}

// 页面加载时
onMounted(() => {
    getServices();
});




</script>




<style scoped lang="scss">
.system-microservice-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}
</style>
